<html lang="zh"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset='UTF-8'>
    <meta name='Author' content='wanghua'>
    <title>Test upload with Layui2</title>
    <link rel='stylesheet' th:href="@{/layui/css/layui.css}" href='../static/layui/css/layui.css' media="all"/>
    <style>
        .thumb {margin-left:5px; margin-top:15px; height:128px}
        #prevModal {width:100%; height:100%; text-align:center; display:none;}
        #img_prev {max-width:98%; max-height:98%; margin: 10px auto}
    </style>
</head>
<body>

<div class='layui-container' style='margin-top:15px'>
    <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon"></i>选择图片
    </button>
    <div class='layui-input-block' id='div_prev' title=''></div>
</div>

<div id='prevModal'>
    <img id='img_prev'/>
</div>
<script type='text/javascript' th:src="@{/layui/layui.js}" src='../static/layui/layui.js'></script>
<script type='text/javascript'>
    layui.use(['upload','layer'], function(){
        var upload = layui.upload, layer = layui.layer, $ = layui.jquery;
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            accept: 'images', //允许上传的文件类型
            multiple: true, //允许多文件上传
            auto: false, //选完文件后不要自动上传
            bindAction: '#upd', //指定一个按钮触发上传
            url: '/upload/', //上传接口
            choose: function(obj){
                var files = obj.pushFile(); //将每次选择的文件追加到文件队列

                //图像预览，如果是多文件，会逐个添加。(不支持ie8/9)
                obj.preview(function(index, file, result){
                    var imgobj = new Image(); //创建新img对象
                    imgobj.src = result; //指定数据源
                    imgobj.className = 'thumb';
                    imgobj.onclick = function(result) {
                        //单击预览
                        img_prev.src = this.src;
                        var w = $(window).width() - 42, h = $(window).height() - 42;
                        layer.open({
                            title: '预览',
                            type: 1,
                            area: [w, h], //宽高
                            content: $('#prevModal')
                        });
                    };
                    document.getElementById("div_prev").appendChild(imgobj); //添加到预览区域
                });
            },
            done: function(res){
                //上传完毕回调
            },
            error: function(){
                //请求异常回调
            }
        });
    });
</script>

</body>
</html>